/* 表格容器：宽高 100% 继承父容器 */
.table-container {
	width: 100%;
	height: 100%;	
	.table-content{
		height: 100%;
		width: fit-content;		
		max-width: 100%;		
		position: relative; // 确保内部绝对定位元素（指示线）相对于容器
		display: flex;
		flex-direction: column;		
	}

	:global(.virtual-scroll-container) {
		&::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		;

		&::-webkit-scrollbar-thumb {
			border-radius: 5px;
			border: 2px solid transparent;
			background-clip: padding-box;
		}
	}

	:global(.scroll-container) {
		&::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		;

		&::-webkit-scrollbar-thumb {
			border-radius: 5px;
			border: 2px solid transparent;
			background-clip: padding-box;
		}
	}
}

.table--border {
	:global(.virtual-scroll-container) {
		&::-webkit-scrollbar:horizontal {	//横向滚动条		
			box-shadow: 0 calc(-1px / var(--dpr)) 0 var(--color-border);
		};

		&::-webkit-scrollbar:vertical {
			box-shadow: inset calc(1px / var(--dpr)) 0 0 var(--color-border);
		};
	};

	:global(.scroll-container) {
		&::-webkit-scrollbar:horizontal {			
			box-shadow: 0 calc(-1px / var(--dpr)) 0 var(--color-border);
		};

		&::-webkit-scrollbar:vertical {
			box-shadow: inset calc(1px / var(--dpr)) 0 0 var(--color-border);
		};
	}
}

/* 优化表格行渲染性能 */
.table-tr {
	&:hover {
		background-color: var(--color-fill);
	}
}

.table-tr--stripe {
	background-color: var(--color-primary-50);
}

.table-thead {
	width: fit-content; /* 宽度由内容决定，即所有列宽之和 */
	max-width: 100%;
	display: flex;
	flex-direction: row;
	/* 垂直堆叠行 */	
	box-shadow: inset 0 calc(-1px / var(--dpr)) 0 var(--color-border);

	will-change: transform;
	overflow: hidden;
}

.header-column-container {
	display: flex;
	flex-direction: column;
	/* 垂直堆叠：上面是标题，下面是子列 */
	flex-shrink: 0;
	/* 右边框加在容器上 */
	box-sizing: border-box;
}

.table--border .header-column-container {	
	box-shadow: inset calc(-1px / var(--dpr)) 0 0 var(--color-border);

	&:last-child {
		box-shadow: none;
	}
}

/* 🔥 新增：子列的横向容器 */
.header-children-row {
	display: flex;
	flex-direction: row;
	/* 子列横向排列 */
	width: 100%;
	flex: 1;
	/* 占满剩余高度 */
	box-shadow: 0 calc(-1px / var(--dpr)) 0 var(--color-border);	
	/* 子容器顶部加边框，即父标题的底部 */
}

// .virtualized .table-thead {
// 	height: var(--row-height);
// }
.virtualized {
	.table-td {
		display: inline-block; // 显示省略号
		white-space: nowrap;
		/* 强制不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 溢出文本显示省略号（可选，优化视觉） */
		text-align: var(--text-align, left);
	}
}

.table-th {
	// justify-content: center; // 默认居中，如果是分组通常居中
	position: relative;
	flex-shrink: 0; // 禁止 flex 压缩宽度，完全遵从 style width
	font-weight: 600;
	justify-content: var(--text-align, left);

	// &.is-group {
	// 	justify-content: center; // 分组标题默认居中
	// }
}

.th-content {
	display: flex;
	align-items: center; // 内容垂直居中
	justify-content: var(--text-align, left);
	gap: 4px;
}

.table-tbody {
	display: grid; // 启用Grid布局
	// width: fit-content; 
	min-width: 100%;
	gap: 0;
}

.virtual-table-tbody {
	// padding-bottom: 1px;
	transform: translateZ(0); //虚拟表格时，开启硬件加速，防止渲染问题
}

.virtual-table-tbody .table-tr {
	height: var(--row-height);
	// &:last-child {
	// 	height: calc(var(--row-height) - 2px);
	// }
}

/* 确保行在grid布局中正确显示 */
.table-tbody .table-tr {
	display: grid; // 行内启用Grid，确保单元格对齐
	min-width: max-content; // 确保内容不溢出时列宽正常
	grid-template-columns: var(--grid-cols); // 动态列宽（从组件传递）
	// border-bottom: var(--border);
	box-shadow: inset 0 calc(-1px / var(--dpr)) 0 var(--color-border);

	// &:last-child {
	// 	border-bottom: none;
	// }
}
.is-horizontal{
	.table-tbody .table-tr:last-child{
		box-shadow: none;
	}
}
.table-tbody .table-td {
	min-width: 0;
	justify-content: var(--text-align, left);
}

.table-th,
.table-td {
	display: flex;
	align-items: center; // 内容垂直居中
	min-width: 0;
	white-space: normal;
	overflow: hidden;
	box-sizing: border-box; // 🔥 统一盒模型
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	// 优先渲染清晰度（牺牲一点速度，提升放大后可读性）
	// text-rendering: geometricPrecision;
	// 禁用文字缩放模糊（部分浏览器有效）
}

.table--border {		
	box-shadow: 
	inset 0 calc(1px / var(--dpr)) 0 var(--color-border),
	calc(1px / var(--dpr)) 0 0 var(--color-border),
	inset 0 calc(-1px / var(--dpr)) 0 var(--color-border),
	calc(-1px / var(--dpr)) 0 0 var(--color-border);
}

.table--border .table-td {	
	box-shadow: inset calc(-1px / var(--dpr)) 0 0 var(--color-border);
}

/* 边框控制 */
.table--border .table-td:last-child {
	box-shadow: none;
}

.small {

	.table-th,
	.table-td {
		padding: 6px 12px;
		font-size: 12px;
	}

	.sort-button {
		font-size: 8px;
		width: 13px;
	}

	.filter-button {
		font-size: 14px;
	}
}

.medium {

	.table-th,
	.table-td {
		padding: 8px 12px;
		font-size: 13px;
	}

	.sort-button {
		font-size: 9px;
		width: 15px;
	}

	.filter-button {
		font-size: 16px;
	}
}

.large {

	.table-th,
	.table-td {
		padding: 10px 12px;
		font-size: 14px;
	}

	.sort-button {
		font-size: 10px;
		width: 18px;
	}

	.filter-button {
		font-size: 18px;
	}
}

.sort-button,
.filter-button {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	color: var(--color-info-400);
	align-items: center;
	position: relative;
}

/* 列宽拖动手柄 */
.resize-handle {
	position: absolute;
	top: 0;
	right: 0; // 向右偏移，使其中心对准边框线
	width: 5px; // 稍微加宽感应区域
	height: 100%;
	cursor: col-resize;
	background-color: transparent;
}

.resize-guide-line {
	position: absolute;
	top: 0;
	left: 0;
	border-left: var(--border);	
	z-index: 999; // 确保在最上层，不被遮挡
	pointer-events: none; // 不影响鼠标事件
}

// 加载状态容器
.loading {
	position: absolute;
	width: 100%;
	// top: calc(var(--row-height) - 3px);
}

// 筛选下拉框
.filter-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	background-color: var(--color-fill);
	border: var(--border);
	border-radius: var(--border-radius);
	padding: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-keyword {
	padding: 6px 8px 4px 8px;
}

.filter-options {
	display: flex;
	flex-direction: column;

	:global(.filter-checkbox-group) {
		gap: 0;
		flex-direction: column;
		margin-left: 1rem;

		:global(.filter-checkbox-hidden) {
			display: none;
		}
	}

	.filter-checkbox-select-all {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.filter-checkbox-group-container {
		max-height: 200px;
		overflow-y: auto;
	}
}

.filter-actions {
	padding: 0 10px;
	display: flex;
	justify-content: space-between;
}

.is-active {
	color: var(--color-primary-600);
}

.sort-index {
	scale: 0.9;
	color: var(--color-primary-600);
	position: absolute;
	right: -4px;
	bottom: 0;
}

.check-box-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.table--border  {
	.check-box-container{
		box-shadow: inset calc(-1px / var(--dpr)) 0 0 var(--color-border);
	}
	.footer-container .check-box-container{
		box-shadow: none;
	}
}

/* Table Footer 样式 */
.footer-container{
	width: 100%;
	overflow: hidden;	
	will-change: transform;	
}
.table-tfoot {
	display: flex;	
	min-width: max-content;		
	background-color: var(--color-page);
	box-shadow: 		
		inset 0 calc(1px / var(--dpr)) 0 var(--color-border);	
	.table-td {
		flex-shrink: 0;
		/* 防止被压缩 */
		/* 复用 table-td 的基础样式，保持对齐 */
		font-weight: 600;
	}
}